<template>
  <div>
    <ul class="letterlist">
      <li class="letter" v-for="(item,key) in sortLetter" :key="key" @click="handleclick">{{item}}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "Alphabet",
    data() {
      return {
        // list: []
      }
    },
    computed: {
      sortLetter() {
        let code = 64;
        const list = [];
        for (let i = 0; i < 26; i++) {
          code++;
          let str = String.fromCharCode(code);//A
          if (str == 'I' || str == 'O' || str == 'U' || str == 'V') {
            continue;
          }
          list.push(str);
        }
        return list
      }
    },
    methods: {
      handleclick(e) {
        this.$emit('touchchange',e.target.innerText);
        // console.log(e.target.innerText);
      }
      // sortLetter: function () {
      //   let code = 64;
      //   for (let i = 0; i < 26; i++) {
      //     code++;
      //     let str = String.fromCharCode(code);//A
      //     if (str == 'I' || str == 'O' || str == 'U' || str == 'V') {
      //       continue;
      //     }
      //     this.list.push(str);
      //   }
      // }
    },
    mounted() {
      // this.sortLetter();
    }
  }
</script>

<style lang="stylus" scoped>
  .letterlist {
    display flex
    flex-wrap wrap

    .letter {
      width 16.55%
      height .9rem
      line-height .9rem
      text-align center
      ellopsis();
    }
  }
</style>
